<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px" :inline="true">
        <el-form-item label="请选择常数类别">
            <el-select
                    @change = "typeChange"
                    v-model="selectType"
                    placeholder="请选择常数类别..."
                    size="large"
                    style="width: 240px"
            >
                <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.constanttypename"
                        :value="item.id"
                />
            </el-select>
        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="toAdd">添加</el-button>
        </el-form-item>
    </el-form>

    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="constanttypeid" label="常数类别ID" width="180"/>
            <el-table-column prop="constantcode" label="常数项编码" width="180"/>
            <el-table-column prop="constantname" label="常数项名称"/>
            <el-table-column label="操作">
                <template #default="solt">
                    <el-button link type="primary" size="small" @click="toEdit(solt)"> 编辑</el-button>
                    <el-button link type="primary" size="small">删除</el-button>
                </template>

            </el-table-column>
        </el-table>
    </div>

    <!-- 添加表单 dialogFormVisible 表示是否显示，  boolean   -->
    <el-dialog v-model="editDialogFormVisible" title="用户编辑" width="500">
        <el-form :model="editForm" label-width="auto">
            <el-form-item label="用户名">
                <el-input v-model="editForm.username"/>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="editForm.gender">
                    <el-radio value="1">男</el-radio>
                    <el-radio value="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="省份">
                <el-select v-model="editForm.province" placeholder="请选择省份" size="small" style="width: 240px">
                    <!-- ： 形式绑定变量  v-bind：   -->
                    <el-option v-for="province in  provinceList  " :label="province.label" :value="province.value"/>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>


<script setup>
    import {onMounted, onUnmounted, ref} from 'vue'
    import {ElNotification} from 'element-plus'
    import service from '@/utils/request'

    let selectType = ref('')    //常数类别列表用户选择的typeid
    let options = ref([])   //常数类别列表
    let form = ref({});
    //是否显示 dialog
    let editDialogFormVisible = ref(false);

    //提交数据 到
    function onSubmit() {
        console.log("form", form.value);
    }

    //表格的数据
    let tableData = ref([])

    function toAdd() {

        editDialogFormVisible.value = true;

    }

    function typeChange(a){
        service.post("/constantitem/getbytypeid",{id:a}).then(
            res=>{
                //console.log(res)
                tableData.value = res.data
            }
        )
    }
    function save() {
        //1 获取添加的表单信息
        console.log("editForm.value: ", editForm.value);


        //2 发送网络请求 到后端，

        // 3  判断 请求结果，成功与否
        editDialogFormVisible.value = false;

        // 给与用户反馈
        ElNotification({
            title: '提示',
            message: '保存成功!!!!!!!!!!!!!',
            type: 'success',
        })
    }

    function listData(){
        service.get("/constantitem/list").then(
            res=>{
                tableData.value = res.data;
        }
        )
    }

    onMounted(() => {
        //加载常数项所有数据
        listData()

        //加载常数类别，提供给用户选择（下拉列别）
        service.get("/constanttype/list").then(
            res=>{
                options.value = res.data
               // selectType.value = 1
            }
        )
    })
</script>